import { computed, nextTick, Ref, unref, watch } from 'vue'
import { ref } from 'vue'
import type { EChartsOption } from 'echarts'
import echarts from '@/utils/lib/echart.js'
import { useDebounceFn } from '@vueuse/shared'
import { useEventListener } from '@/hooks/event/useEventListener'
import { useBreakpoint } from '@/hooks/event/useBreakpoint'
import { useTimeoutFn } from '../core/useTimeout'
import { useRootSetting } from '../setting/useRootSetting'
import { tryOnUnmounted } from '@vueuse/core'
require('echarts/theme/macarons')
export function useECharts(
  elRef: Ref<HTMLDivElement>,
  theme: 'macarons' | 'light' | 'dark' | 'default' = 'default'
) {
  const { getDarkMode: getSysDarkMode } = useRootSetting()

  const getDarkMode = computed(() => {
    return theme ? theme : getSysDarkMode.value
  })
  // | 分隔符 表示 chartInstance可能是 这两种类型， 配合下面的？.使用 等于号不知道起什么作用
  let chartInstance: echarts.ECharts | null = null
  let resizeFn: Fn = resize
  const cacheOptions = ref({}) as Ref<EChartsOption>
  let removeResizeFn: Fn = () => {}

  resizeFn = useDebounceFn(resize, 200)

  // 动态修改配置变更
  const getOptions = computed(() => {
    return {
      backgroundColor: 'transparent',
      ...cacheOptions.value,
    } as EChartsOption
  })
  // const getOptions = computed(() => {})
  function initCharts(t = theme) {
    const el = unref(elRef)
    if (!el || !unref(el)) {
      return
    }
    chartInstance = echarts.init(el, t)
    const { removeEvent } = useEventListener({
      el: window,
      name: 'resize',
      listener: resizeFn,
    })
    removeResizeFn = removeEvent

    const { widthRef, screenEnum } = useBreakpoint()

    if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
      useTimeoutFn(() => {
        resizeFn()
      }, 30)
    }
  }

  function setOptions(options: EChartsOption, clear = true) {
    cacheOptions.value = options
    // 兼容高度未刷新出来
    if (unref(elRef)?.offsetHeight === 0) {
      useTimeoutFn(() => {
        setOptions(unref(getOptions))
      }, 30)
      return
    }
    nextTick(() => {
      useTimeoutFn(() => {
        if (!chartInstance) {
          initCharts(getDarkMode.value as 'light')

          if (!chartInstance) return
        }
        clear && chartInstance?.clear()

        chartInstance?.setOption(unref(getOptions))
      }, 30)
    })
  }
  function resize() {
    console.log('resize typeof =' + typeof chartInstance)
    chartInstance?.resize({
      animation: {
        duration: 300,
        easing: 'quadraticIn',
      },
    })
  }

  // 监听主题
  watch(
    () => getDarkMode.value,
    (theme) => {
      chartInstance?.dispose()
      initCharts(theme as 'light')
      setOptions(cacheOptions.value)
    }
  )

  tryOnUnmounted(() => {
    if (!chartInstance) return
    removeResizeFn()
    chartInstance.dispose()
    chartInstance = null
  })

  function getInstance(): echarts.ECharts | null {
    if (!chartInstance) {
      initCharts(getDarkMode.value as 'light')
    }
    return chartInstance
  }
  return {
    setOptions,
    resize,
    echarts,
    getInstance,
  }
}
